<template>
	<view>
		<u-popup :show="show" mode="bottom" :closeable="true" :round="20" @close="show = false" :safeAreaInsetBottom="false">
			<view class="mess-content">
				<view class="cont-title">请阅读并同意以下条款</view>
				<view class="conts">
					<view class="arrge">
						<view hover-class="hover_class" @click="agreement('user_agreement')">《用户协议》</view>
						<view hover-class="hover_class" @click="agreement('privacy_policy')">《隐私权政策》</view>
					</view>
					<button hover-class="hover_class" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="login">同意并继续</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="regPop" mode="center" :closeable="false" :round="20" :safeAreaInsetBottom="false">
			<view class="reg-rows">
				<view class="tite">邀请注册</view>
				<view class="form-info">
					<input placeholder="推荐码" v-model="phoneInfo.rec_code" />
					<input placeholder="商户名称" v-model="phoneInfo.shop_name"/>
				</view>
				<view class="sub-btn" @click="submitForm">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				regPop: false,
				phoneInfo: {
					rec_code: '',
					shop_name: ''
				}
			}
		},
		methods: {
			submitForm() {
				const {rec_code, shop_name} = this.phoneInfo
				// if(!rec_code) {
				// 	return uni.showToast({
				// 		title: '请输入推荐码',
				// 		icon: 'none'
				// 	})
				// }
				// if(!shop_name) {
				// 	return uni.showToast({
				// 		title: '请输入商户名称',
				// 		icon: 'none'
				// 	})
				// }
				this.regPop = false
				this.$emit("getPhoneNumber", this.phoneInfo)
			},
			agreement(key) {
				uni.navigateTo({
					url: `/userPackage/pages/instructions/index?apiKey=${key}&privacy=privacy`
				})
			},
			check() {
				this.show = true
			},
			getPhoneNumber(e) {
				this.show = false
				this.phoneInfo = {
					...e,
					rec_code: '',
					shop_name: ''
				}
				this.regPop = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.reg-rows {
	width: 75vw;
	border-radius: 20upx;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	padding: 30upx 24upx;
	>.sub-btn {
		width: 100%;
		margin-top: 50upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #fff;
		border-radius: 50upx;
		background-color: #0B59E0;
	}
	>.form-info {
		margin-top: 35upx;
		input {
			width: 100%;
			font-size: 28upx;
			height: 80upx;
			box-sizing: border-box;
			padding: 0 20upx;
			border-radius: 10upx;
			margin-bottom: 20upx;
			border: 1px solid #e2e2e2;
		}
	}
	>.tite {
		text-align: center;
		font-size: 34upx;
		color: #000;
		font-weight: 600;
	}
}
.mess-content {
	overflow: hidden;
	.cont-title {
		text-align: center;
		height: 90upx;
		line-height: 95upx;
		font-size: 29upx;
		color: #333333;
		border-bottom: 1px solid #f3f3f3;
	}
	.conts {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 80upx;
		>view {
			display: flex;
			align-items: center;
			>view {
				font-size: 28upx;
				color: #023F92;
			}
		}
		.login {
			width: 100%;
			height: 80upx;
			border-radius: 60upx;
			background-color: #0B59E0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30upx;
			color: #FFFFFF;
			margin-top: 76upx;
		}
	}
}
</style>